<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分记录</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="assets/css/judgerText.css" rel="stylesheet">
    <link href="./bootstrap-4.6.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/PFcode.css" rel="stylesheet">
</head>

<body>
    <div id="myApp">
        <div id="menuBar">
            <div class="menu-item" id="homeButton" @click="goToHome">首页</div>
            <div class="menu-item" id="scoreHistoryButton">评分记录</div>
        </div>
        <div id="recordContainer" v-for="record in records" :key="record.id">
            <div id="candidateInfoBlock">
                <div class="candidateAvatar">
                    <img id="candidateAvatar" :src="record.plaAvatar" alt="Candidate Avatar">
                </div>
                <div class="candidateName"><strong></strong> <span id="candidateName">{{record.plaName}}</span></div>
                <div class="candidateNumber"><strong></strong> <span id="candidateNumber">{{record.plaId}}号选手</span>
                </div>
                <div class="candidateSlogan"><strong></strong> <span
                        id="candidateSlogan">{{record.matDeclaration}}</span></div>
                <div class="candidateTime"><strong></strong> <span id="candidateTime">操作时间:{{record.recDate}}</span>
                </div>
                <div class="candidateScore"><strong></strong> <span>{{record.recScore}}<span
                            style="font-size: 14px;">分</span></span>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/jquery-3.5.1.min.js"></script>
    <script src="./bootstrap-4.6.2/js/bootstrap.bundle.min.js"></script>
    <script src="./vue/vue-2.7.6.min.js"></script>
    <script src="./vue/axios.min.js"></script>
    <script src="./vue/vue-router-3.6.5.js"></script>
    <script src="./assets/js/constants.js"></script>
    <script>
        let ajax = axios.create({
            baseURL: baseURL,
            timeout: 5000
        });

        const user = localStorage.getItem("user");
        const token = user ? JSON.parse(user).token : "";
        ajax.defaults.headers.common['Authorization'] = 'Bearer ' + token;
    </script>

    <script>
        const app = new Vue({
            el: "#myApp",
            data: {
                records: []
            },
            methods: {
                findMyRecords() {
                    ajax.get('/record/list')
                        .then(res => {
                            console.log('获取到的记录:', res.data.data);
                            this.records = res.data.data;
                            console.log('更新后的 records:', this.records);
                        })
                        .catch(error => {
                            console.error('获取记录失败:', error);
                        });
                },
                goToHome() {
                    window.location.href = 'judgerTex.html';
                }
            },
            created() {
                this.findMyRecords();
            }
        });
    </script>
</body>

</html>